<template>
	<div>
		<el-row :gutter="10" style="margin-bottom: 60px">
			<el-col :span="6">
				<el-card style="color: #409EFF">
					<div><i class="el-icon-user-solid" /> 用户总数</div>
					<div style="padding: 10px 0; text-align: center; font-weight: bold">
						{{users == null ? 0 : users}}
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card style="color: #F56C6C">
					<div><i class="el-icon-money" /> 今日访问</div>
					<div style="padding: 10px 0; text-align: center; font-weight: bold">
						{{ counts.view == null ? 0 : counts.view[6]}}
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card style="color: #67C23A">
					<div><i class="el-icon-bank-card" /> 今日点赞</div>
					<div style="padding: 10px 0; text-align: center; font-weight: bold">
						{{ counts.like == null ? 0 : counts.like[6]}}
					</div>
				</el-card>
			</el-col>
			<el-col :span="6">
				<el-card style="color: #E6A23C">
					<div><i class="el-icon-s-shop" /> 今日评论</div>
					<div style="padding: 10px 0; text-align: center; font-weight: bold">
						{{ counts.comment == null ? 0 : counts.comment[6]}}
					</div>
				</el-card>
			</el-col>
		</el-row>
		<div>
			<MyChart :Countlist="counts"></MyChart>
		</div>
		
		<div>
			<MapChart :Countlist = "countlist"></MapChart>
		</div>
	</div>
</template>

<script>
	import MyChart from "@/components/MyChart";
	import MapChart from "@/components/MapChart";

	export default {
		name: "Home",
		data() {
			return {
				counts:{
					view: [],
					like: [],
					share:[],
					collection: [],
					comment:[],
				},
				users: '',
				countlist: [],
			}
		},
		components: {
			MyChart,
			MapChart
		},
		methods: {
			getCount() {
				this.request.get("/api/tweet/getCountList").then(res => {
					if (res.code == 200) {
						// 对于传送数据进行处理操作
						res.result.counts.forEach((item, index) => {
							this.counts.view[index] = item.viewCount;
							this.counts.like[index] = item.likeCount;
							this.counts.share[index] = item.forwardCount;
							this.counts.collection[index] = item.collectionCount;
							this.counts.comment[index] = item.commentCount;
						})
						this.countlist = res.result.map;
						this.users = res.result.users;
					} else {
						this.$message.error(res.msg)
					}
					console.log("请求刷新" ,this.countlist)
				})
			},
		},
		created() { // 页面元素渲染之后再触发
			this.getCount();
			console.log("页面渲染", this.countlist)
		}
	}
</script>

<style scoped>

</style>
